<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./ajax.js"></script>
</head>

<body>
    <input type="text" name="" id="">
    <p class="tips"></p>
    <input type="text" name="" id="">
    <p class="tips2"></p>

    <input type="button" name="" id="" value="注册">
    <p class="tips3"></p>
    <script>

        /*
            输入框失焦事件--获取输入框的值，发起检查请求
        */

        let ipts = document.querySelectorAll('input');
        let isUsername = false;//记录 用户名输入框的格式是否正确
        ipts[0].onblur = function () {
            let username = this.value;
            let checkeUsernameAPI = 'http://jx.xuzhixiang.top/ap/api/checkname.php';
            ajax({
                url: checkeUsernameAPI,
                method: 'get',
                params: { username },
                success(r) {
                    console.log(r);
                    let tips = document.querySelector('.tips')
                    // 利用服务器返回的修改页面内容--flag 记录 输入框的格式是否正确
                    if (r.code == 1) {
                        tips.innerHTML = r.msg;
                        tips.style.color = 'green';
                        isUsername = true
                    } else {
                        tips.innerHTML = r.msg;
                        tips.style.color = 'red';
                        isUsername = false

                    }

                    let tips3 = document.querySelector('.tips3')
                    if (isPassword && isUsername) {
                        //可以注册
                        tips3.innerHTML = ''
                    } else {
                        tips3.innerHTML = '请检查上面的输入框'
                        tips3.style.color = 'red'

                    }


                }
            })

        }

        let isPassword = false;
        ipts[1].onblur = function () {

            // 至少6位的非空字符串
            let reg = /^\S{6,}$/
            let tips2 = document.querySelector('.tips2')
            if (reg.test(this.value)) {
                isPassword = true
                tips2.innerHTML = ''

            } else {
                isPassword = false
                tips2.innerHTML = '密码不能为空-至少6位'
                tips2.style.color = 'red'


            }


            let tips3 = document.querySelector('.tips3')
            if (isPassword && isUsername) {
                //可以注册
                tips3.innerHTML = ''
            } else {
                tips3.innerHTML = '请检查上面的输入框'
                tips3.style.color = 'red'

            }


        }

        // 点击注册按钮的时候 判断 用户名 格式是否正确---password 至少6位

        ipts[2].onclick = function () {
            let tips3 = document.querySelector('.tips3')
            if (isPassword && isUsername) {
                //可以注册
                tips3.innerHTML = ''
                // 发起注册请求
                let username = ipts[0].value;
                let password = ipts[1].value;

                ajax({
                    url: 'http://jx.xuzhixiang.top/ap/api/reg.php',
                    method: 'get',
                    params: { username, password },
                    success(r) {
                        console.log(r);
                    }
                })
            } else {
                tips3.innerHTML = '请检查上面的输入框'
                tips3.style.color = 'red'

            }


        }





    </script>

</body>

</html>